<template>
		<view class="back">
			<view class="phone" @click="phoneFn">
				<image class="img" src="https:\/\/hunshaimg.sdshengyue.cn\/\/attach\/2023\/11\/92128202311221046279913.png" mode=""></image>
			</view>
			<diy ref="diy" v-if="isDiy && loading"></diy>
			<visualization ref='vis' v-else-if="!isDiy && loading"></visualization>
			<view class="bottom">
				<view class="bottom_item" v-for="(item,index) in articleList" :key="index">
					<view @click="detailFn(item.id)" class="bottom_content">
						<view class="bottom_img">
							<image class="img1" :src="item.image_input[0]"></image>
						</view>
						<view class="bottom_font">
							<view class="bottom_title">
								{{item.title}}
							</view>
							<view class="bottom_synopsis">
								{{item.synopsis}}
							</view>
						</view>
					</view>
					<view class="xian">
						
					</view>
				</view>
			</view>
			<view class="footer">
				<image class="footer-img" src="https:\/\/hunshaimg.sdshengyue.cn\/\/attach\/2023\/11\/f650b20231127143525229.png" mode=""></image>
			</view>
		</view>
</template>

<script>
	import {
		getArticleCategoryList,
		getArticleList,
		getArticleHotList,
		getArticleBannerList
	} from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import diy from './diy'
	import visualization from './visualization'
	import Cache from '@/utils/cache';
	import {
		getShare,
		getVersion
	} from "@/api/public.js";
	import {
		mapGetters
	} from "vuex";
	let app = getApp();
	export default {
		data() {
			return {
				isDiy: uni.getStorageSync('is_diy'),
				shareInfo: {},
				loading: false,
				page:1,
				limit:8,
				articleList:[],
				activeCou: 1
			}
		},
		components: {
			diy,
			visualization
		},
		onLoad() {
			uni.hideTabBar()
			// uni.$on('is_diy', (data) => {
			// 	this.isDiy = data
			// 1})
			this.setOpenShare();
			this.getList()
		},
		onShow() {
			if (!this.isLogin) toLogin();
			this.getVersion(0);
		},
		onHide() {
			// this.isDiy = -1
		},
		computed: mapGetters(['isLogin']),
		methods: {
			detailFn(id){
				uni.navigateTo({
					url:"/pages/extension/news_details/index?id="+id
				})
			},
			getList(){
				let that = this;
				let limit = that.limit;
				let page = that.page;
				let articleList = that.articleList;
				getArticleList(that.activeCou).then(res => {
					let articleListNew = [];
					let len = res.length;
					articleListNew = articleList.concat(res.data);
					that.page++;
					that.$set(that, 'articleList', articleListNew);
					that.status = limit > len;
					that.page = that.page;
					// console.log(res.data,'articleList');
					// console.log(that.activeCou,'that.activeCou');
				});
			},
			phoneFn(){
				uni.makePhoneCall({
					phoneNumber: '13770966202' 
				});
			},
			getVersion(name) {
				uni.$emit('uploadFooter')
				getVersion(name).then(res => {
					this.version = res.data.version
					this.isDiy = res.data.is_diy
					this.loading = true
					uni.setStorageSync('is_diy', res.data.is_diy)
					if (!uni.getStorageSync('DIY_VERSION') || res.data.version != uni.getStorageSync(
							'DIY_VERSION')) {
						if (uni.getStorageSync('DIY_VERSION')) {
							uni.setStorageSync('DIY_VERSION', res.data.version)
							if (this.isDiy) {
								this.$refs.diy.reconnect()
							} else {
								this.$refs.vis.reconnect()
							}
						}
						uni.setStorageSync('DIY_VERSION', res.data.version)
					} else {}
				}).catch(err => {
					// #ifdef APP-PLUS
					setTimeout(e => {
						this.getVersion(0);
					}, 1500)
					// #endif
					// #ifndef APP-PLUS
					this.$util.Tips({
						title: err
					});
					// #endif
				})
			},
			// 微信分享；
			setOpenShare: function() {
				let that = this;
				getShare().then((res) => {
					let data = res.data;
					this.shareInfo = data;
					// #ifdef H5
					let url = location.href;
					if (this.$store.state.app.uid) {
						url =
							url.indexOf("?") === -1 ?
							url + "?spread=" + this.$store.state.app.uid :
							url + "&spread=" + this.$store.state.app.uid;
					}
					if (that.$wechat.isWeixin()) {
						let configAppMessage = {
							desc: data.synopsis,
							title: data.title,
							link: url,
							imgUrl: data.img,
						};
						that.$wechat.wechatEvevt(
							["updateAppMessageShareData", "updateTimelineShareData"],
							configAppMessage
						);
					}
					// #endif
				});
			},
		},
		onReachBottom: function() {
			if (this.isDiy) {
				this.$refs.diy.onsollBotton()
			}
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		// #ifdef MP
		//发送给朋友
		onShareAppMessage(res) {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			let that = this;
			return {
				title: this.shareInfo.title,
				path: "/pages/index/index?spid=" + this.$store.state.app.uid || 0,
				imageUrl: this.shareInfo.img,
			};
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: this.shareInfo.title,
				query: {
					spid: this.$store.state.app.uid || 0
				},
				imageUrl: this.shareInfo.img,
			};
		},
		// #endif
	}
</script>

<style lang="scss" scoped>
	.xian{
		    margin: 32rpx 0;
		    background-color: #f4f4f4;
		    height: 2rpx;
	}
	.footer{
		    position: absolute;
		    bottom: 190rpx;
		    left: 50%;
		    transform: translate(-50%, 0);
	}
	.footer-img{
		width: 410rpx;
		height: 58rpx;
	}
	.bottom_font{
		padding: 20rpx;
	}
	.img1{
		width: 100%;
		height: 400rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
	}
	.bottom_item{
		// background-color: #fff;
		margin-bottom: 40rpx;
	}
	.bottom_content{
		background-color: #fff;
	}
	.bottom_title{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #000000;
		
	}
	.bottom_synopsis{
	font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #AAAAAA;
	margin-top: 5rpx;
	}
	.bottom{
		padding: 30rpx 32rpx;
		padding-bottom: 400rpx;
		
		
	}
.back{
	background-color: #f0ece6;
	position: relative;
}
.phone{
	position: fixed;
	bottom: 200rpx;
	right: 32rpx;
	z-index: 50;
}
.img{
	width: 134rpx;
	height: 110rpx;
	z-index: 999;
}
</style>
